<html>
    <head>
        <title>使用transition元素包裹需要过渡的元素</title>
    </head>
    <body>
        <script>
            // 使用transition元素包裹需要过渡的元素
                        /*
                            Vue 提供了名为 transition 的封装组件，在下列情形中，可以给任何元素和组件添加 进入/离开 过渡：
                                1.条件渲染 (使用 v-if)
                                2.条件展示 (使用 v-show)
                                3.动态组件 
                                4.组件根节点

                            这里是一个典型的例子：

                                <div id="demo">
                                    <button v-on:click="show =!show">
                                        Toggle+
                                    </button>
                                    <transition name="fade">  
                                        <p v-if="show">hello</p>
                                    </transition>
                                </div>
                        */
                        new Vue({
                                    el:'#demo',
                                    data:{
                                        show:true
                                    }
                                });
                        
                        /*
                            当插入或删除包含咋 transition 组件中的元素时，Vue将会做以下处理：
                                
                                1.自动嗅探目标元素是否应用了css 过渡或动画，如果是，在恰当的时机 添加/删除 css 类型。
                                
                                2.如果过渡组件通过了 JavaScript钩子函数 ,这些钩子函数将在恰当的时机被调用。

                                3.如果没有找到JavaScript 钩子，且也没有检测到CSS过渡/动画， DOM操作(插入/删除)在下一帧中立即执行。
                                  （注意： 此指浏览器逐帧动画机制， 和 Vue的 nextTick概念不同）
                        */

        </script>
    </body>
</html>